import React from 'react';
import './index.scss';

import { SideMenu } from '@src/core';
import { Icon, Divider } from 'antd';

import classNames from 'classNames';

import {
    CloseSquareOutlined,
    MenuOutlined,
    ColumnHeightOutlined
} from '@ant-design/icons';


class View extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            nav_arr: [],
            pageHeaderShow: true,
            sideShow: true,

            menuTree: [{
                id: 1,
                name: '示例',
                url: '',
                children: [{
                    id: 91,
                    name: 'Button',
                    full_name: 'Button',
                    url: './demo.html#/Button',
                    active: false,
                    full_screen: false
                },{
                    id: 93,
                    name: '包裹器',
                    full_name: '包裹器',
                    url: './demo.html#/SpaceWraper',
                    active: false,
                    full_screen: false
                }]
            }]
        }


    }

    componentDidMount() {
        // localStorage.clear();

        // this.addPage({
        //     id: 3,
        //     name: '学员管理学员管理',
        //     url: 'http://www.ly.com',
        //     active: false,
        // })
    }

    toggleHeaderShow = () => {
        this.setState({
            pageHeaderShow: !this.state.pageHeaderShow
        })
    }

    toggleSideShow = () => {
        this.setState({
            sideShow: !this.state.sideShow
        })
    }

    addPage = (item) => {

        var hasOpen = this.hasOpen(item);
        if (!hasOpen) {
            this.state.nav_arr.push(item);
            this.setState({
                nav_arr: this.state.nav_arr
            }, () => {
                this.setActive(item)
            })

        } else {
            this.setActive(item);
        }

    }

    hasOpen = (item) => {
        var b = this.state.nav_arr.find((nav) => {
            return nav.name == item.name;
        }) || false
        return b;
    }

    setActive = (item) => {
        this.state.nav_arr.forEach((each) => {
            if (each.name != item.name) {
                each.active = false;
            }
        })
        item.active = true;


        this.setState({
            nav_arr: this.state.nav_arr
        })

        if (item.full_screen) {
            this.setState({
                pageHeaderShow: false,
                sideShow: false
            })
        }
    }



    removeItem = (item, cb) => {
        var index = -1;
        this.state.nav_arr.forEach((each, i) => {
            if (each.name == item.name) {
                index = i
            }
        })
        if (index > -1) {

            var me_active = this.state.nav_arr[index]['active'] || false;
            var pre_index = index - 1;
            if (pre_index < 0) {
                pre_index = 0;
            }

            this.state.nav_arr.splice(index, 1)



            this.setState({
                nav_arr: this.state.nav_arr
            }, () => {

                if (me_active) {

                    this.addPage(this.state.nav_arr[pre_index])
                }

            })
        }
        return index;
    }

    closeNav = (item, e) => {
        e.preventDefault();
        e.stopPropagation();

        var i = this.removeItem(item);
    }

    navClick = (item) => {

        this.setActive(item)

        var container = document.querySelector('#m-multi-page-body');
        var iframe_arr = document.querySelectorAll('#m-multi-page-body>iframe');

        var exist = document.querySelector('#m-multi-page-body iframe[attr_key="' + item.name + '"]');

        iframe_arr.forEach(iframe => {
            if (iframe.getAttribute('attr_key') == item.name) {
                iframe.classList.add('active')
            } else {
                iframe.classList.remove('active')
            }
        });


        //存在就置自己为激活
        if (!exist) {
            var new_iframe = document.createElement("iframe");//创建新的节点 p
            new_iframe.src = item.url;

            new_iframe.setAttribute("attr_key", item.name);
            new_iframe.setAttribute("width", '100%');
            new_iframe.setAttribute("height", '100%');
            new_iframe.setAttribute("frameborder", 'no');
            new_iframe.setAttribute("border", 'no');
            new_iframe.setAttribute("scrolling", 'no');
            new_iframe.setAttribute("allowtransparency", 'no');

            new_iframe.classList.add('active')

            container.appendChild(new_iframe);
        }
        console.log(exist);

    }


    exit() {
        localStorage.clear();
        window.location.href = "./login.html";
    }

    render() {


        return (
            <div className="top-layout">

                {
                    this.state.pageHeaderShow && <div className="top-layout-header animated">
                        <div className="left">

                            {/* <img src={require("./img/logo.png")} /> */}
                            {/* <div className="logo"></div> */}
                            <div className="title">科达React组件库</div>

                            {/* <img align="absmiddle" src="http://xyy-sys.cdn.beiing.cn/admin/image_blue/zzLoginLog.png" width="180" height="50" /> */}
                        </div>
                        <div className="mid">

                        </div>
                        <div className="right">
                            <div>管理员</div>
                            <Divider style={{ marginTop: '4px', color: '#e8e8e8' }} type="vertical" />
                            <div className="exitBtn" onClick={this.exit}>退出</div>

                        </div>
                    </div>
                }

                <div className="top-layout-body">

                    {
                        this.state.sideShow && <div className="top-layout-body-side">
                            <SideMenu menuTree={this.state.menuTree} leafNodeClick={this.addPage} />
                        </div>
                    }



                    <div className="m-multi-page">
                        <div className="m-multi-page-header">
                            <div className="m-multi-page-header-left">
                                <div className="each" onClick={this.toggleSideShow}>
                                    <MenuOutlined />
                                </div>
                            </div>
                            <div className="m-multi-page-header-center">

                                {
                                    this.state.nav_arr.map((item, index) => {

                                        var each_cls = classNames("each", { active: item.active })

                                        return <div className={each_cls} onClick={() => this.navClick(item)}>
                                            {item.full_name}
                                            <CloseSquareOutlined onClick={(e) => { this.closeNav(item, e) }} />
                                            {/* <Icon type="close-square" onClick={(e) => { this.closeNav(item, e) }} /> */}
                                        </div>
                                    })
                                }

                            </div>
                            <div className="m-multi-page-header-right">
                                <div className="each" onClick={this.toggleHeaderShow}>
                                    {
                                        !this.state.pageHeaderShow && <ColumnHeightOutlined />
                                    }
                                    {
                                        this.state.pageHeaderShow && <ColumnHeightOutlined />
                                    }
                                </div>
                            </div>

                        </div>
                        <div className="m-multi-page-body" id="m-multi-page-body">

                            {
                                this.state.nav_arr.map((item, index) => {

                                    var cls = classNames({ active: item.active })

                                    return <iframe attr_key="企业管理" className={cls} id="1" src={item.url} width="100%" height="100%" frameborder="no" border="0" scrolling="no" allowtransparency="yes"></iframe>
                                })
                            }


                        </div>
                    </div>


                </div>

            </div >
        );
    }
}
export default View;